<template>
	<view class="content"  v-if="status === null || show">
		<view class="title">申请代理</view>
		<view class="input">
			<li><span>姓名</span><input placeholder="请输入" placeholder-class="in" v-model="userName" /></li>
			<li><span>手机号</span><input placeholder="请输入" maxlength="11" placeholder-class="in" v-model="userMobile" /></li>
			<li><span>常用地址</span><input placeholder="请输入" placeholder-class="in" v-model="userAddress" /></li>
			<li><span>公司名称</span><input placeholder="请输入" placeholder-class="in" v-model="corporateName" /></li>
			<p class="p">公司资质</p>
			<view class="upload">
				<van-uploader :file-list="fileList" max-count="5" multiple @after-read="afterRead" @delete='deleteFn' :deletable="true"/>
			</view>
		</view>
		
		<view class="tips"><text>*</text> 请认真填写，申请后不可修改</view>
		<view class="but" @tap="apply">确认</view>
	</view>
	
	<view v-else-if="status === 0 || status === 1" class="agebt">
		<em><image src="../../static/img/vip.jpg"></image></em>
		<text>{{text}}</text>
	</view>
	
	<view v-else-if="status === 2" class="success">
		<text>{{data.msg}}</text>
		<view class="but" @click="show=true">重新申请</view>
	</view>
	
</template>
<script>
	export default {
		data() {
			return {
				show: false,
				status: null,
				userName:'',
				userMobile:'',
				userAddress:'',
				corporateName:'',
				fileList:[],
				qualificationImgs:[],
				text: '',
			}
		},
		onLoad() {
			this.realName()
			console.log(this.fileList)
		},
		methods: {
			realName() {
				let _this = this;
				wx.request({
					url: 'https://www.norwamd.cn/apps/user/apply/isAgent',
					data: {},
					method: "GET",
					header: {
						'content-type': 'application/json',
						'Authorization': uni.getStorageSync('token')
					},
					success(res) {
						if(res.data.success === false) {
							_this.status = null
						} else {
							_this.status = res.data.data
							_this.text = res.data.msg
						}
					}
				})
			},
			apply(){
				if(this.userName&&this.userMobile){
					this.$api({
						url: `/user/apply`,
						method: "POST",
						data: {
							userName: this.userName,
							userMobile: this.userMobile,
							userAddress:  this.userAddress,
							corporateName:this.corporateName,
							qualificationImgs:this.qualificationImgs.join(',')
						}
					}).then(res=>{
						uni.showToast({
							title: '申请成功',
							duration: 2000
						});
						uni.navigateBack()
					})
				}
			},
			afterRead(event) {
			  const { file } = event.detail;
			  this.fileList.push(...file)
			  
			  file.forEach(item=>{
				  wx.getFileSystemManager().readFile({
				    filePath: item.url, 
				    encoding: 'base64', //编码格式
				    success: res => { //成功的回调
				  		this.qualificationImgs.push(res.data)
				    }
				  })
			  })
			  
			},
			deleteFn(event){
				this.fileList.splice(event.detail.index,1)
				this.qualificationImgs.splice(event.detail.index,1)
			}
		}
	}
</script>

<style lang="scss">
	
	page {
		background: #fff;
	}
	
	.content,
	.success {
		padding: 100rpx 50rpx;
		box-sizing: border-box;
	}
	
	.title {
		font-weight: bold;
	}
	.input {
		margin: 50rpx 0 0;
		li {
			height: 92rpx;
			display: flex;
			align-items: center;
			border-bottom: 2rpx solid #d8d8d8;
			input {
				flex: 1;
				color: #333;
				font-size: 30rpx;
			}
			span {
				min-width: 160rpx;
			}
		}
	}
	
	.p {
		color: #333;
		margin: 20rpx 0;
	}
	
	.tips {
		color: #999;
		font-size: 28rpx;
		text {
			color: #dc261b;
		}
	}
	
	.in {
		color: #999;
		font-size: 28rpx;
	}
	
	.but {
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		border-radius: 50rpx;
		background: #dc261b;
		color: #fff;
		font-size: 30rpx;
		margin: 80rpx 0 0;
	}
	
	
	.agebt {
		height: 100vh;
		padding: 30rpx;
		background: #ededed;
		em {
			position: relative;
			image {
				position: absolute;
				top: 0;
				left: 0;
				width: 690rpx;
				height: 367rpx;
				border-radius: 30rpx;
			}
		}
		text {
			display: block;
			position: relative;
			color: #fff;
			z-index: 1;
			font-size: 42rpx;
			padding: 120rpx 0 0 60rpx;
		}
	}
	
	.success {
		font-size: 28rpx;
		text-align: center;
	}
	
	.upload{
		display: flex;
		flex-wrap: wrap;
	}
</style>
